<template>
	<div class="wrapper">
		<div class="content">
			<div class="search-title">
				<input type="text" name="">
				<span v-on:click='goback()'>取消</span>
			</div>
		</div>
		<div class="search-tab">
			<h2 class="title">热门搜索</h2>
			<button class="hot-title" v-for='item in hot.subjects'>{{item.title}}</button>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				hot:[]
			}
		},
		 mounted(){
		    this.$http.jsonp("https://api.douban.com/v2/movie/top250?apikey=0b2bdeda43b5688921839c8ecb20399b").then(function(response){
		        console.log(response.body)
		        this.hot=response.body;

		       
		    }) 
		  },
		  methods:{
		  	goback:function(){
		  		this.$router.go(-1)
		  	}
		  }
	}
</script>

<style scoped>
	.wrapper{
		background-color: #e5e9f2;
		display: block;
		height: 100%;
	}	
	.content{
		display: block;
		width: 100%;
	}
	.search-tab{
		margin-left: 10px; 
	}
	.search-title{
		height: 60px;
		text-align: center;
		line-height: 60px;
	}
	.search-title input{
		border: 0px;
		width: 80%;
		height: 30px;
		border-radius: 30px;
	}
	h2.title{
		margin-bottom: 10px;
		font-size: 15px;
	}
	button.hot-title{
		border: 0px;
		color: #f00;
		height: 30px;
		border-radius: 10px;
		margin-right: 4px;
		margin-bottom: 5px;
		background: #fff;
		font-size: 12px;
	}
</style>